<template>
    <view>
        <view
            class="v-header"
            :style="{
                paddingTop: Custom.top + 'px',
                justifyContent: isSearch ? 'flex-start' : 'center'
            }"
        >
            <template v-if="true">
                <view
                    class="search-left"
                    @click="$jump('/views/subViews/videoPage/searchVideo/index')"
                >
                    <fui-icon name="search" color="#FFFFFF" :size="40"></fui-icon>
                </view>
                <view class="searcg-center">
                    <view
                        :style="{ height: Custom.height + 'px' }"
                        :class="{ 'searcg-center-item': true, 'search-active': videoType == 0 }"
                        @click="videoType = 0"
                    >
                        <text style="color: #fff">关注</text>
                    </view>
                    <view
                        :style="{ height: Custom.height + 'px' }"
                        :class="{ 'searcg-center-item': true, 'search-active': videoType == 1 }"
                        @click="videoType = 1"
                    >
                        <text style="color: #fff">热门</text>
                    </view>
                </view>
            </template>
            <template v-else>
                <view class="search-big u-flex">
                    <fui-icon
                        class="s-icon-big"
                        name="search"
                        color="#ffffff"
                        :size="40"
                    ></fui-icon>
                    <fui-input
                        v-model="searchKey"
                        placeholder="关键词搜索"
                        :borderTop="false"
                        :borderBottom="false"
                        class="search-top"
                        placeholderStyle="color:#ffffff;font-size:28rpx"
                        backgroundColor="rgba(0, 0, 0, 0.2)"
                        radius="999"
                        :padding="[0, 0, 0, '80rpx']"
                        size="28"
                        @confirm="search"
                        color="#fff"
                        style="height: 72rpx"
                    >
                        <fui-icon
                            style="padding-right: 8rpx"
                            name="clear-fill"
                            color="#FFFFFF"
                            :size="40"
                            @click="isSearch = false"
                        ></fui-icon>
                    </fui-input>
                </view>
            </template>
        </view>

        <!--












    注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用

    1. new_index.nvue、index.nvue这两个是App页面

    2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）

    3. 请各位大神多多留手，我已经把请求内存开到最大了

    4. 视频 id 切记是字符串类型









     -->
        <!-- #ifdef H5 -->
        <swiper
            :style="
                'width: ' +
                windowWidth +
                'px; height: ' +
                windowHeight +
                'px; background-color: #000000;'
            "
            :vertical="true"
            @animationfinish="animationfinish"
            @change="change"
            :current="current"
            :indicator-dots="false"
        >
            <swiper-item v-for="(list, index) in dataList" :key="index">
                <view v-if="isChange">
                    <view>
                        <!-- 
            1.v-if：用于控制视频在节点的渲染数
            2.muted的默认值是 false，代表默认是禁音视频的
            3.http-cache默认开启视频缓存
            4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
            5.show-loading：这里默认去掉播放转圈的标志

             -->
                        <video
                            v-if="isShow"
                            :id="list._id + '_' + index"
                            :loop="true"
                            :muted="list.isplay"
                            :controls="false"
                            :http-cache="true"
                            :page-gesture="false"
                            :show-fullscreen-btn="false"
                            :show-loading="false"
                            :show-center-play-btn="false"
                            :enable-progress-gesture="false"
                            :src="list.src"
                            @ended="ended"
                            @click="tapVideoHover(list.state, $event)"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; background-color: #000000;'
                            "
                            :poster="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                        ></video>
                        <!--
            1.这里是封面（方案二）：这里的封面可以自定义。
            2.也在代码中做了批注，两种方案可以共存，不会相互影响。
            -->
                        <image
                            v-if="!list.playIng"
                            :src="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; position: absolute;'
                            "
                            mode="aspectFit"
                        ></image>
                    </view>
                    <!-- 播放状态：pause 的时候就会暂停 -->
                    <view
                        class="videoHover"
                        @click="tapVideoHover(list.state, $event)"
                        :style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px;'"
                    >
                        <image
                            v-if="list.state == 'pause'"
                            class="playState"
                            :src="$getImg('/img/icon/video/play.png')"
                        ></image>
                    </view>
                    <view class="userInfo">
                        <!-- 1.头像 -->
                        <image
                            @click="tozuozhe"
                            class="userAvatar"
                            :src="list.avatar"
                            mode="aspectFill"
                        ></image>
                        <!-- 2.点赞 -->
                        <view @click="cLike(list.like)" style="opacity: 0.9; margin-top: 17px">
                            <image
                                v-if="list.like"
                                :src="$getImg('/img/icon/video/xin.png')"
                                style="width: 40px; height: 40px; position: absolute; right: 6px"
                            ></image>
                            <image
                                v-if="!list.like"
                                :src="$getImg('/img/icon/video/xin-2.png')"
                                style="width: 40px; height: 40px; position: absolute; right: 6px"
                            ></image>
                            <text
                                style="
                                    color: #ffffff;
                                    margin-top: 5px;
                                    font-size: 14px;
                                    text-align: center;
                                    margin-top: 40px;
                                    font-weight: bold;
                                "
                                :class="{ likeNumActive: list.like }"
                                >{{ list.like_n }}
                            </text>
                        </view>
                        <!-- 3.评论 -->
                        <view
                            class="comment"
                            @click="toComment(index)"
                            style="opacity: 0.9; margin-top: 17px"
                        >
                            <image
                                :src="$getImg('/img/icon/video/liaotian-2.png')"
                                style="width: 35px; height: 35px; position: absolute; right: 7px"
                            ></image>
                            <text
                                style="
                                    color: #ffffff;
                                    margin-top: 5px;
                                    font-size: 14px;
                                    font-weight: bold;
                                    text-align: center;
                                    margin-top: 40px;
                                "
                            >
                                {{ list.sms_n }}
                            </text>
                        </view>
                        <!-- 4.分享 -->
                        <view @click="share" style="opacity: 0.9; margin-top: 17px">
                            <image
                                :src="$getImg('/img/icon/video/share-fill.png')"
                                style="width: 40px; height: 40px; position: absolute; right: 5px"
                            ></image>
                            <text
                                style="
                                    color: #ffffff;
                                    margin-top: 5px;
                                    font-size: 14px;
                                    text-align: center;
                                    font-weight: bold;
                                    margin-top: 40px;
                                "
                            >
                                分享
                            </text>
                        </view>
                    </view>
                    <!-- 最底下的文字部分 -->
                    <view class="content">
                        <text class="userName" :style="'width: ' + (windowWidth - 90) + 'px;'">{{
                            list.title
                        }}</text
                        ><!-- i={{i}} -->
                        <text class="words" :style="'width: ' + (windowWidth - 90) + 'px;'"
                            >{{ list.msg }}-{{ k + 1 }}</text
                        >
                        <!-- k={{k}} -->
                    </view>
                </view>
                <view v-if="Math.abs(k - index) <= 1 && !isChange">
                    <view>
                        <!--
            1.v-if：用于控制视频在节点的渲染数
            2.muted的默认值是 false，代表默认是禁音视频的
            3.http-cache默认开启视频缓存
            4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
            5.show-loading：这里默认去掉播放转圈的标志

             -->
                        <video
                            v-if="isShow"
                            :id="list._id + '' + index"
                            :loop="true"
                            :muted="list.isplay"
                            :controls="false"
                            :http-cache="true"
                            :page-gesture="false"
                            :show-fullscreen-btn="false"
                            :show-loading="false"
                            :show-center-play-btn="false"
                            :enable-progress-gesture="false"
                            :src="list.src"
                            @ended="ended"
                            @click="tapVideoHover(list.state, $event)"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; background-color: #000000;'
                            "
                            :poster="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                        ></video>
                        <!--
            1.这里是封面（方案二）：这里的封面可以自定义。
            2.也在代码中做了批注，两种方案可以共存，不会相互影响。
            -->
                        <image
                            v-if="!list.playIng"
                            :src="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; position: absolute;'
                            "
                            mode="aspectFit"
                        ></image>
                    </view>
                    <!-- 播放状态：pause 的时候就会暂停 -->
                    <view
                        class="videoHover"
                        @click="tapVideoHover(list.state, $event)"
                        :style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px;'"
                    >
                        <image
                            v-if="list.state == 'pause'"
                            class="playState"
                            :src="$getImg('/img/icon/video/play.png')"
                        ></image>
                    </view>
                    <view class="userInfo">
                        <!-- 1.头像 -->
                        <image
                            @click="tozuozhe"
                            class="userAvatar"
                            :src="list.avatar"
                            mode="aspectFill"
                        ></image>
                        <!-- 2.点赞 -->
                        <view @click="cLike(list.like)" style="opacity: 0.9; margin-top: 17px">
                            <image
                                v-if="list.like"
                                :src="$getImg('/img/icon/video/xin.png')"
                                style="width: 40px; height: 40px; position: absolute; right: 6px"
                            ></image>
                            <image
                                v-if="!list.like"
                                :src="$getImg('/img/icon/video/xin-2.png')"
                                style="width: 40px; height: 40px; position: absolute; right: 6px"
                            ></image>
                            <text
                                style="
                                    color: #ffffff;
                                    margin-top: 5px;
                                    font-size: 14px;
                                    text-align: center;
                                    margin-top: 40px;
                                    font-weight: bold;
                                "
                                :class="{ likeNumActive: list.like }"
                                >{{ list.like_n }}
                            </text>
                        </view>
                        <!-- 3.评论 -->
                        <view
                            class="comment"
                            @click="toComment(index)"
                            style="opacity: 0.9; margin-top: 17px"
                        >
                            <image
                                :src="$getImg('/img/icon/video/liaotian-2.png')"
                                style="width: 35px; height: 35px; position: absolute; right: 7px"
                            ></image>
                            <text
                                style="
                                    color: #ffffff;
                                    margin-top: 5px;
                                    font-size: 14px;
                                    font-weight: bold;
                                    text-align: center;
                                    margin-top: 40px;
                                "
                            >
                                {{ list.sms_n }}
                            </text>
                        </view>
                        <!-- 4.分享 -->
                        <view @click="share" style="opacity: 0.9; margin-top: 17px">
                            <image
                                :src="$getImg('/img/icon/video/share-fill.png')"
                                style="width: 40px; height: 40px; position: absolute; right: 5px"
                            ></image>
                            <text
                                style="
                                    color: #ffffff;
                                    margin-top: 5px;
                                    font-size: 14px;
                                    text-align: center;
                                    font-weight: bold;
                                    margin-top: 40px;
                                "
                            >
                                分享
                            </text>
                        </view>
                    </view>
                    <!-- 最底下的文字部分 -->
                    <view class="content">
                        <text class="userName" :style="'width: ' + (windowWidth - 90) + 'px;'">{{
                            list.title
                        }}</text
                        ><!-- i={{i}} -->
                        <text class="words" :style="'width: ' + (windowWidth - 90) + 'px;'"
                            >{{ list.msg }}-{{ k + 1 }}</text
                        >
                        <!-- k={{k}} -->
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <swiper
            :style="
                'width: ' +
                windowWidth +
                'px; height: ' +
                windowHeight +
                'px; background-color: #000000;'
            "
            :vertical="true"
            @animationfinish="animationfinish"
            @change="change"
            :current="current"
            :indicator-dots="false"
            @touchstart="mpTouchstart"
            @touchend="mpTouchend"
        >
            <swiper-item v-for="(list, index) in dataList" :key="index">
                <view v-if="isChange">
                    <view>
                        <!--
            1.v-if：用于控制视频在节点的渲染数
            2.muted的默认值是 false，代表默认是禁音视频的
            3.http-cache默认开启视频缓存
            4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
            5.show-loading：这里默认去掉播放转圈的标志

             -->
                        <video
                            v-if="isShow"
                            :id="list._id + '_' + index"
                            :loop="true"
                            :muted="list.isplay"
                            :controls="false"
                            :http-cache="true"
                            :page-gesture="false"
                            :show-fullscreen-btn="false"
                            :show-loading="false"
                            :show-center-play-btn="false"
                            :enable-progress-gesture="false"
                            :src="list.src"
                            @ended="ended"
                            @click="tapVideoHover(list.state, $event)"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; background-color: #000000;'
                            "
                            :poster="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                        ></video>
                        <!--
            1.这里是封面（方案二）：这里的封面可以自定义。
            2.也在代码中做了批注，两种方案可以共存，不会相互影响。
            -->
                        <image
                            v-if="!list.playIng"
                            :src="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; position: absolute;'
                            "
                            mode="aspectFit"
                        ></image>
                    </view>
                    <!-- 播放状态：pause 的时候就会暂停 -->
                    <view
                        class="videoHover"
                        @click="tapVideoHover(list.state, $event)"
                        :style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px;'"
                    >
                        <image
                            v-if="list.state == 'pause'"
                            class="playState"
                            :src="$getImg('/img/icon/video/play.png')"
                        ></image>
                    </view>
                    <view class="userInfo">
                        <!-- 1.头像 -->
                        <view class="avatar-box">
                            <image
                                class="userAvatar"
                                :src="list.avatar"
                                mode="aspectFill"
                                @click.stop="
                                    $jump(
                                        '/views/subViews/userHomePage/index/index?' +
                                            (list.type === 1 ? 'uid' : 'factoryId') +
                                            '=' +
                                            list.bindId
                                    )
                                "
                            ></image>

                            <image
                                v-if="
                                    (list.type === 2
                                        ? !list.userBehaviorEcho.followShopFlag
                                        : !list.userBehaviorEcho.followUserFlag) &&
                                    userInfo.userId !== list.bindId
                                "
                                class="follow-icon"
                                :src="$getImg('/img/video/follow.png')"
                                @click="tapFollow(list, $event)"
                            ></image>
                        </view>

                        <view class="userFunc flex-column gap-[30rpx]">
                            <!--                            点赞-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="
                                        $getImg(
                                            !list.userBehaviorEcho.likeFlag
                                                ? '/img/video/dianzan.png'
                                                : '/img/video/dianzan_a.png'
                                        )
                                    "
                                    @click.stop="likeFn(list)"
                                ></image>
                                <view class="count">{{ list.likeCount }}</view>
                            </view>
                            <!--                            收藏-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="
                                        $getImg(
                                            !list.userBehaviorEcho.collectFlag
                                                ? '/img/video/shoucang.png'
                                                : '/img/video/shoucang_a.png'
                                        )
                                    "
                                    @click.stop="collectFn(list)"
                                ></image>
                                <view class="count">{{ list.collectionCount }}</view>
                            </view>

                            <!--                            评论-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="$getImg('/img/video/pinlun.png')"
                                    @click.stop="showComment(list, $event)"
                                ></image>
                                <view class="count">{{ list.commentCount }}</view>
                            </view>
                            <!--                            分享-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="$getImg('/img/video/fenxiang.png')"
                                ></image>
                                <view class="count">{{ list.shareCount }}</view>
                            </view>
                        </view>

                        <!--                        &lt;!&ndash; 2.点赞 &ndash;&gt;-->
                        <!--                        <view @click="cLike(list.like)" style="opacity: 0.9; margin-top: 17px">-->
                        <!--                            <image-->
                        <!--                                v-if="list.like"-->
                        <!--                                :src="$getImg('/img/icon/video/xin.png')"-->
                        <!--                                style="width: 40px; height: 40px; position: absolute; right: 6px"-->
                        <!--                            ></image>-->
                        <!--                            <image-->
                        <!--                                v-if="!list.like"-->
                        <!--                                :src="$getImg('/img/icon/video/xin-2.png')"-->
                        <!--                                style="width: 40px; height: 40px; position: absolute; right: 6px"-->
                        <!--                            ></image>-->
                        <!--                            <text-->
                        <!--                                style="-->
                        <!--                                    color: #ffffff;-->
                        <!--                                    margin-top: 5px;-->
                        <!--                                    font-size: 14px;-->
                        <!--                                    text-align: center;-->
                        <!--                                    margin-top: 40px;-->
                        <!--                                    font-weight: bold;-->
                        <!--                                "-->
                        <!--                                :class="{ likeNumActive: list.like }"-->
                        <!--                                >{{ list.like_n }}-->
                        <!--                            </text>-->
                        <!--                        </view>-->
                        <!--                        &lt;!&ndash; 3.评论 &ndash;&gt;-->
                        <!--                        <view-->
                        <!--                            class="comment"-->
                        <!--                            @click="toComment(index)"-->
                        <!--                            style="opacity: 0.9; margin-top: 17px"-->
                        <!--                        >-->
                        <!--                            <image-->
                        <!--                                :src="$getImg('/img/icon/video/liaotian-2.png')"-->
                        <!--                                style="width: 35px; height: 35px; position: absolute; right: 7px"-->
                        <!--                            ></image>-->
                        <!--                            <text-->
                        <!--                                style="-->
                        <!--                                    color: #ffffff;-->
                        <!--                                    margin-top: 5px;-->
                        <!--                                    font-size: 14px;-->
                        <!--                                    font-weight: bold;-->
                        <!--                                    text-align: center;-->
                        <!--                                    margin-top: 40px;-->
                        <!--                                "-->
                        <!--                            >-->
                        <!--                                {{ list.sms_n }}-->
                        <!--                            </text>-->
                        <!--                        </view>-->
                        <!--                        &lt;!&ndash; 4.分享 &ndash;&gt;-->
                        <!--                        <view @click="share" style="opacity: 0.9; margin-top: 17px">-->
                        <!--                            <image-->
                        <!--                                :src="$getImg('/img/icon/video/share-fill.png')"-->
                        <!--                                style="width: 40px; height: 40px; position: absolute; right: 5px"-->
                        <!--                            ></image>-->
                        <!--                            <text-->
                        <!--                                style="-->
                        <!--                                    color: #ffffff;-->
                        <!--                                    margin-top: 5px;-->
                        <!--                                    font-size: 14px;-->
                        <!--                                    text-align: center;-->
                        <!--                                    font-weight: bold;-->
                        <!--                                    margin-top: 40px;-->
                        <!--                                "-->
                        <!--                            >-->
                        <!--                                分享-->
                        <!--                            </text>-->
                        <!--                        </view>-->
                    </view>

                    <!-- 最底下的文字部分 -->
                    <view class="content">
                        <text class="userName" :style="'width: ' + (windowWidth - 90) + 'px;'">{{
                            list.title
                        }}</text
                        ><!-- i={{i}} -->
                        <view class="words" :style="'width: ' + (windowWidth - 90) + 'px;'">
                            <kevy-ellipsis
                                textId="q3"
                                v-if="list.msg && list.msg.length > 0"
                                :content="list.msg"
                                font-color="#fff"
                                :font-size="28"
                                :rows="2"
                                collapseText="收起"
                                expandText="展开"
                                actionFontColor="#fff"
                                oneRowTextAlign="left"
                            ></kevy-ellipsis>
                        </view>
                        <!-- k={{k}} -->
                    </view>
                </view>
                <view v-if="Math.abs(k - index) <= 1 && !isChange">
                    <view>
                        <!--
            1.v-if：用于控制视频在节点的渲染数
            2.muted的默认值是 false，代表默认是禁音视频的
            3.http-cache默认开启视频缓存
            4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频
            5.show-loading：这里默认去掉播放转圈的标志

             -->
                        <video
                            v-if="isShow"
                            :id="list._id + '' + index"
                            :loop="true"
                            :muted="list.isplay"
                            :controls="false"
                            :http-cache="true"
                            :page-gesture="false"
                            :show-fullscreen-btn="false"
                            :show-loading="false"
                            :show-center-play-btn="false"
                            :enable-progress-gesture="false"
                            :src="list.src"
                            @ended="ended"
                            @click="tapVideoHover(list.state, $event)"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; background-color: #000000;'
                            "
                            :poster="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                        ></video>
                        <!--
            1.这里是封面（方案二）：这里的封面可以自定义。
            2.也在代码中做了批注，两种方案可以共存，不会相互影响。
            -->
                        <image
                            v-if="!list.playIng"
                            :src="list.src + '?x-oss-process=video/snapshot,t_100,f_jpg'"
                            :style="
                                'width: ' +
                                windowWidth +
                                'px; height: ' +
                                windowHeight +
                                'px; position: absolute;'
                            "
                            mode="aspectFit"
                        ></image>
                    </view>
                    <!-- 播放状态：pause 的时候就会暂停 -->
                    <view
                        class="videoHover"
                        @click="tapVideoHover(list.state, $event)"
                        :style="'width: ' + windowWidth + 'px; height: ' + windowHeight + 'px;'"
                    >
                        <image
                            v-if="list.state == 'pause'"
                            class="playState"
                            :src="$getImg('/img/icon/video/play.png')"
                        ></image>
                    </view>
                    <view class="userInfo">
                        <!-- 1.头像 -->
                        <view class="avatar-box">
                            <image
                                class="userAvatar"
                                :src="list.avatar"
                                mode="aspectFill"
                                @click.stop="
                                    $jump(
                                        '/views/subViews/userHomePage/index/index?' +
                                            (list.type === 1 ? 'uid' : 'factoryId') +
                                            '=' +
                                            list.bindId
                                    )
                                "
                            ></image>

                            <image
                                v-if="
                                    (list.type === 2
                                        ? !list.userBehaviorEcho.followShopFlag
                                        : !list.userBehaviorEcho.followUserFlag) &&
                                    userInfo.userId !== list.bindId
                                "
                                class="follow-icon"
                                :src="$getImg('/img/video/follow.png')"
                                @click="tapFollow(list, $event)"
                            ></image>
                        </view>

                        <view class="userFunc flex-column gap-[30rpx]">
                            <!--                            点赞-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="
                                        $getImg(
                                            !list.userBehaviorEcho.likeFlag
                                                ? '/img/video/dianzan.png'
                                                : '/img/video/dianzan_a.png'
                                        )
                                    "
                                    @click.stop="likeFn(list)"
                                ></image>
                                <view class="count">{{ list.likeCount }}</view>
                            </view>
                            <!--                            收藏-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="
                                        $getImg(
                                            !list.userBehaviorEcho.collectFlag
                                                ? '/img/video/shoucang.png'
                                                : '/img/video/shoucang_a.png'
                                        )
                                    "
                                    @click.stop="collectFn(list)"
                                ></image>
                                <view class="count">{{ list.collectionCount }}</view>
                            </view>

                            <!--                            评论-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="$getImg('/img/video/pinlun.png')"
                                    @click.stop="showComment(list, $event)"
                                ></image>
                                <view class="count">{{ list.commentCount }}</view>
                            </view>
                            <!--                            分享-->
                            <view class="user-item flex-center-column gap-[20rpx]">
                                <image
                                    mode="widthFix"
                                    :src="$getImg('/img/video/fenxiang.png')"
                                    @click.stop="shareFn(list)"
                                ></image>
                                <view class="count">{{ list.shareCount }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 最底下的文字部分 -->
                    <view class="content">
                        <text class="userName" :style="'width: ' + (windowWidth - 90) + 'px;'">{{
                            list.title
                        }}</text
                        ><!-- i={{i}} -->

                        <view class="words" :style="'width: ' + (windowWidth - 90) + 'px;'">
                            <kevy-ellipsis
                                textId="q3"
                                v-if="list.msg && list.msg.length > 0"
                                :content="list.msg"
                                font-color="#fff"
                                :font-size="28"
                                :rows="2"
                                collapseText="收起"
                                expandText="展开"
                                actionFontColor="#fff"
                                oneRowTextAlign="left"
                            ></kevy-ellipsis>
                        </view>
                        <!-- k={{k}} -->
                    </view>
                </view>
            </swiper-item>
        </swiper>
        <!-- #endif -->
        <CommentList type="2" ref="commentListREF"></CommentList>
        <tabbar class="tabbar"></tabbar>
        <shareCom ref="shareComREF"></shareCom>
    </view>
</template>

<script>
import { useUserStore } from '@/stores/user'
const userInfo = useUserStore().userInfo
console.log('userInfo', userInfo)
import kevyEllipsis from '@/components/kevy-ellipsis/kevy-ellipsis.vue'
import { videoPage, videoRandom } from '@/api/video'
import { userActionAPI } from '@/api/common'
import CommentList from '@/components/forumList/comment.vue'
// import userList from '../new_index/data.js'//这个是假数据
const audo = uni.createInnerAudioContext()
import { getRect, toPx } from '@/utils/util'
audo.loop = true
export default {
    components: {
        CommentList,
        kevyEllipsis
    },
    data() {
        return {
            videoType: 1,
            userInfo: userInfo,

            windowWidth: 0,
            windowHeight: 0,
            platform: '',
            deleteHeight: 0,
            dataList: [],
            k: 0,
            oldVideo: '',
            voice: '',
            timeout: '',
            current: 0,
            boxStyle: {
                //视频，图片封面样式🌟💗
                height: 0,
                width: 0
            },
            Custom: {},
            isAutoplay: false, //是否开启自动播放(默认不开启)
            autoplayText: '开启自动播放',
            thisindex: 0,
            isChange: true,

            isShow: false,

            changeTimeout: '',
            mptime: 0,
            mpstartTime: 0,

            isClick: false,
            getVideoPageParams: {
                current: 0,
                size: 10
            },
            shareObj: {}
        }
    },
    onShareAppMessage() {
        return {
            title: this.shareObj.nickname + '发布了新视频', //分享标题
            path: '/views/subViews/videoPage/videoDetail/index?videoId=' + this.shareObj.id, // 可不填 传递的参数，只能是这', // 可不填 传递的参数，只能是这
            imageUrl: this.shareObj.frameUrl || '' //封面图
        }
    },
    watch: {
        async k(k, old_k) {
            console.log(k)
            this.isShow = false
            this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
            this.dataList[old_k].isplay = true
            this.dataList[old_k].state = 'pause'
            console.log('预留第' + (old_k + 1) + '个视频：' + this.dataList[old_k]._id + '' + old_k)
            uni.createVideoContext(this.dataList[old_k]._id + '' + old_k, this).stop() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k]._id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
            console.log('已经暂停 --> 第' + (old_k + 1) + '个视频～') //提示
            this.dataList[k].state = 'play'
            this.isShow = true
            // #ifdef MP
            // 如果是小程序端
            clearTimeout(this.changeTimeout)
            this.dataList[k].isplay = false
            setTimeout(() => {
                this.dataList[k].playIng = true
            }, 250)
            if (this.mptime < 0.2) {
                this.changeTimeout = setTimeout(() => {
                    uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
                }, 1400)
            } else {
                uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
            }
            // #endif
            // #ifdef H5
            this.dataList[k].isplay = true
            audo.src = this.dataList[k].src
            if (this.isClick) {
                setTimeout(() => {
                    if (typeof WeixinJSBridge == 'undefined') {
                        setTimeout(() => {
                            audo.play()
                            uni.createVideoContext(this.dataList[k]._id + '' + k, this).seek(0)
                            uni.createVideoContext(this.dataList[k]._id + '' + k, this).play()
                            setTimeout(() => {
                                this.dataList[k].playIng = true
                            }, 650)
                        }, 500)
                    } else {
                        WeixinJSBridge.invoke('getNetworkType', {}, (e) => {
                            setTimeout(() => {
                                audo.play()
                                uni.createVideoContext(this.dataList[k]._id + '' + k, this).seek(0)
                                uni.createVideoContext(this.dataList[k]._id + '' + k, this).play()
                                setTimeout(() => {
                                    this.dataList[k].playIng = true
                                }, 850)
                            }, 200)
                        })
                    }
                }, 200)
            } else {
                audo.pause()
                this.dataList[k].state = 'pause'
                uni.createVideoContext(this.dataList[k]._id + '' + k, this).seek(0)
                uni.createVideoContext(this.dataList[k]._id + '' + k, this).pause()
            }
            // #endif
            const p = k + 1
            console.log('预加载第' + (p + 1) + '个视频：' + this.dataList[p]._id + '' + p)
        },
        async videoType(n, old_n) {
            console.log('切换videotype', n, old_n)
            this.current = 0
            this.dataList = []
            if (n === 0) {
                this.getVideoPageParams.current = 0
            }
            this.get({ option: 0 })
        }
    },

    onReady() {
        const sysInfo = uni.getSystemInfoSync()

        console.log(sysInfo)

        // #ifdef MP-WEIXIN
        const custom = wx.getMenuButtonBoundingClientRect()

        this.Custom = custom
        console.log(custom)
        // #endif
    },
    async onLoad(option) {
        this.platform = uni.getSystemInfoSync().platform
        const model = uni.getSystemInfoSync().model
        if (
            this.platform == 'ios' &&
            (model !== 'iPhone6' ||
                model !== 'iPhone6s' ||
                model !== 'iPhone7' ||
                model !== 'iPhone8')
        ) {
            // this.deleteHeight = 50 //有 tabbar的 修改这里可以改变视频高度
        }
        this.windowWidth = uni.getSystemInfoSync().windowWidth
        this.windowHeight = uni.getSystemInfoSync().windowHeight - toPx('100rpx')

        this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
        this.boxStyle.height = this.windowHeight - this.deleteHeight //有 tabbar的 修改这里可以改变视频高度
        // this.thisindex = Number(option.index)
        this.get({ option: 0 }) //刚进入页面加载数据
    },
    onShow() {
        console.log('回到前台')
        if (this.dataList.length !== 0) {
            // #ifdef MP
            this.dataList[this.k].state = 'play'
            uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
            // #endif
            // #ifdef H5
            if (this.isClick) {
                this.dataList[this.k].state = 'play'
                uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
                audo.play()
            }
            // #endif
        }
    },
    onHide() {
        // #ifdef MP
        this.dataList[this.k].state = 'pause'
        uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause()
        // #endif
        // #ifdef H5
        if (this.isClick) {
            this.dataList[this.k].state = 'pause'
            uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause()
            audo.pause()
        }
        // #endif
        console.log('到后台')
    },
    methods: {
        // 显示评论
        showComment(row, event) {
            this.$nextTick(() => {
                console.log(this.commentListREF)
                this.$refs.commentListREF.showComment(row.id)
            })
        },

        // 收藏
        async collectFn(row) {
            const res = await userActionAPI({
                type: 2,
                action: 22,
                bindId: row.id
            })

            if (res.code === 0) {
                row.userBehaviorEcho.collectFlag = !row.userBehaviorEcho.collectFlag
                row.collectionCount = row.userBehaviorEcho.collectFlag
                    ? row.collectionCount + 1
                    : row.collectionCount - 1
            }
        },

        // 点赞

        async likeFn(row) {
            const res = await userActionAPI({
                type: 1,
                action: 12,
                bindId: row.id
            })

            if (res.code === 0) {
                row.userBehaviorEcho.likeFlag = !row.userBehaviorEcho.likeFlag
                row.likeCount = row.userBehaviorEcho.likeFlag
                    ? row.likeCount + 1
                    : row.likeCount - 1
            }
        },

        // 关注店铺
        async tapFollow(row, event) {
            console.log(1233123, row)
            const flag = row.type === 1
            const res = await userActionAPI({
                type: 4,
                action: flag ? 44 : 41, // 44关注用户  41 关注店铺
                bindId: row.bindId
            })

            if (res.code === 0) {
                const str = flag ? 'followUserFlag' : 'followShopFlag'
                row.userBehaviorEcho[str] = !row.userBehaviorEcho[str]
                uni.showToast({
                    title: '关注成功',
                    icon: 'none'
                })
            }
        },

        mpTouchend() {
            this.mptime = new Date() / 1000 - this.mpstartTime
        },
        mpTouchstart() {
            this.mpstartTime = new Date() / 1000
        },
        autoPlay() {
            this.isAutoplay = !this.isAutoplay
            if (!this.isAutoplay) {
                this.autoplayText = '开启自动播放'
                uni.showToast({
                    title: '关闭自动播放',
                    icon: 'none',
                    duration: 3000
                })
            } else {
                this.autoplayText = '关闭自动播放'
                uni.showToast({
                    title: '开启自动播放',
                    icon: 'none',
                    duration: 3000
                })
            }
        },
        ended() {
            // 1.播放当前视频结束时触发，自动切换下一个视频
            if (this.isAutoplay) {
                this.current = this.k + 1
            }
        },
        //点击播放&&暂停
        tapVideoHover(state, event) {
            console.log('state--', state)
            if (state == 'play' || state == 'continue') {
                this.dataList[this.k].state = 'pause'
            } else {
                this.dataList[this.k].state = 'continue'
            }
            if (this.dataList[this.k].state == 'continue') {
                this.isClick = true
                this.dataList[this.k].playIng = true
                uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play() //暂停以后继续播放
                // #ifdef MP
                this.dataList[this.k].isplay = false
                // #endif
                // #ifdef H5
                audo.play()
                // #endif
            }
            if (this.dataList[this.k].state == 'pause') {
                uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause() //暂停以后继续播放
                // #ifdef MP
                this.dataList[this.k].isplay = true
                // #endif
                // #ifdef H5
                audo.pause()
                // #endif
            }
        },
        change(event) {
            this.k = event.detail.current
        },
        animationfinish(event) {
            // 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
            if (this.k == this.dataList.length - 1) {
                this.GET()
            }
        },
        //每一组结束时新的请求
        async GET() {
            // 1 获取随机视频  0  获取关注视频
            if (this.videoType === 1) {
                const res = await videoRandom()

                if (res.code === 0) {
                    //             // 2.这里把视频添加到视频列表
                    this.fmtList(res.data)
                }
            } else {
                this.getVideoPageParams.current++
                const res = await videoPage({
                    bizTarget: 1, // 1. 关注  2 推荐
                    bizType: 1, // 业务类型：1.视频 2.用户
                    bizTab: 2, //业务tab：1.热门 2.新发
                    ...this.getVideoPageParams
                })

                if (res.code === 0) {
                    this.fmtList(res.data.records)
                }
            }

            // return new Promise((result) => {
            //     uni.request({
            //         url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
            //         method: 'POST',
            //         data: {
            //             info: 'get_video'
            //         },
            //         success: (res) => {
            //             const msg = res.data.data
            //             // 2.这里把视频添加到视频列表
            //             for (let i = 0; i < msg.length; i++) {
            //                 this.dataList.push(msg[i])
            //             }
            //
            //             result(msg)
            //         }
            //     })
            // })
        },
        shareFn(item) {
            console.log('item------------', item)
            this.shareObj = item
            this.$refs.shareComREF.shareFn()
        },

        fmtList(data) {
            const list = data.map((item) => {
                return {
                    ...item,
                    href: item.frameUrl,
                    isShowProgressBarTime: false,
                    isShowimage: false,
                    isplay: true,
                    like: 0,
                    like_n: 0,
                    msg: item.desc,
                    pinlun: [],
                    playIng: false,
                    playNumber: 0,
                    sms_n: 3,
                    src: item.url,
                    state: 'pause',
                    title: '',
                    userID: 'abcdefghijklmn11213',
                    username: item.nickname,
                    _id: item.id
                }
            })

            console.log('视频列表23', list)

            for (let i = 0; i < list.length; i++) {
                this.dataList.push(list[i])
            }
        },
        async get(options) {
            console.log('opthons', options)
            // 1.这里引入后端请求数据
            // var msg = userList
            this.isShow = false
            // this.dataList = uni.getStorageSync('dataList')
            await this.GET()
            console.log(options.option)
            this.current = Number(options.option)
            this.k = Number(options.option)
            await setTimeout(() => {
                this.isChange = false
            }, 50)
            this.isShow = true
            // #ifdef H5
            this.dataList[this.k].isplay = true
            // #endif
            // #ifdef MP
            // 如果是小程序端
            this.dataList[this.k].isplay = false
            this.dataList[this.k].state = 'play'
            // #endif
            this.dataList[this.k].playIng = true
            if (Number(options.option) == 0) {
                setTimeout(() => {
                    // #ifdef H5
                    uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).seek(0)
                    uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).pause()
                    this.dataList[this.k].state = 'pause'
                    audo.src = this.dataList[this.k].src
                    // #endif
                    // #ifdef MP
                    uni.createVideoContext(this.dataList[this.k]._id + '' + this.k, this).play()
                    // #endif
                }, 500)
            }
        },
        toComment(index) {},
        cLike(sss) {
            this.dataList[this.k].like = !this.dataList[this.k].like
            const video = this.dataList[this.k]
            sss ? (video.like_n -= 1) : (video.like_n += 1)
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    background-color: #000000;
}

.item {
    /* width : 750rpx; */
    background-color: #000000;
    position: relative;
}

swiper {
    .content {
        width: 720rpx;
        z-index: 99;
        position: absolute;
        bottom: 30px;
        /* justify-content: center; */
        padding: 15rpx;
        flex-direction: column;
        justify-content: flex-start;
        color: #ffffff;
    }
}

.videoHover {
    position: absolute;
    top: 0;
    left: 0;
    flex: 1;
    display: flex;
    background-color: rgba(0, 0, 0, 0.1);
    justify-content: center;
    align-items: center;

    /* border-style: dashed;
  border-color: #DD524D;
  border-width: 1px; */
}

.userFunc {
    .user-item {
        .count {
            color: #ffffff;
            font-size: 22rpx;
            font-weight: 500;
        }
        image {
            width: 50rpx;
        }
    }
}

.playState {
    width: 160rpx;
    height: 160rpx;
    opacity: 0.2;
}

.userInfo {
    position: absolute;
    bottom: 110px;
    right: 10px;
    flex-direction: column;
}

.avatar-box {
    position: relative;
    //border-radius: 999rpx;
    //border: 2px solid #ffffff;
    margin-bottom: 20rpx;
    .follow-icon {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        bottom: 23rpx;
        right: 0;
        left: 0;
        margin: auto;
    }
}
.userAvatar {
    border-radius: 500%;
    margin-bottom: 15px;
    border-style: solid;
    border-width: 2px;
    border-color: #ffffff;
}

.userAvatar {
    width: 100rpx;
    height: 100rpx;
}

.likeIco,
.shareIco,
.commentIco {
    width: 60rpx;
    height: 60rpx;
    margin-top: 15px;
}

.likeNum,
.commentNum,
.shareTex {
    color: #ffffff;
    font-size: 30rpx;
    text-align: center;
    margin: 5px;
}

.likeNumActive {
    color: red;
}

.userName {
    font-size: 30rpx;
    color: #ffffff;
    margin-top: 80upx;
}

.words {
    margin-top: 10rpx;
    font-size: 30rpx;
    color: #ffffff;
}

.root {
    background-color: #000000;
}

.v-header {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    text-align: right;
    width: 750rpx;
    padding: 10rpx 30rpx 0;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .search-big {
        height: 72rpx;
        position: relative;
        /* #ifdef APP-NVUE */
        flex: 1;
        margin: 0 auto;

        /* #endif */
        .cancel {
            color: #fff;
            font-size: 28rpx;
            margin-left: 30rpx;
        }

        :deep(.fui-input__wrap) {
            padding: unset !important;
            width: 100% !important;
            height: 100% !important;
            padding-left: 80rpx !important;
        }

        .s-icon-big {
            position: absolute;
            left: 28rpx;
            top: 16rpx;
            color: #ffffff;
        }

        .search-top {
        }
    }

    .search-left {
        position: absolute;
        left: 30rpx;
        width: 72rpx;
        height: 72rpx;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .searcg-center {
        width: 308rpx;
        //height: 72rpx;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 1152rpx;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;

        .searcg-center-item {
            width: 152rpx;
            //height: 64rpx;
            font-size: 28rpx;
            text-align: center;
            border-radius: 1156rpx;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            //line-height: 64rpx;
        }

        .search-active {
            background-color: #3871f8;
            font-size: 30rpx;
        }

        .search-tips {
            position: relative;

            &::after {
                position: absolute;
                content: '';
                width: 10rpx;
                height: 10rpx;
                background: #f93636;
                right: 30rpx;
                top: 10rpx;
                border-radius: 100%;
            }
        }
    }
}
</style>
